<template>
  <el-table :data="keyData">
  		<el-table-column label="序号" width="70" type="index"/>
  		<el-table-column label="断言方式" prop="method" align="center">
  			<template #default="scope">
				<el-select v-model="scope.row.method" style="width: 100%;">
					<el-option v-for="value in method" :label="value" :value="value" ></el-option>
				</el-select>
  			</template>
  		</el-table-column>
		<el-table-column label="预期类型" prop="type" align="center" width="200px">
			<template #default="scope">
				<el-select v-model="scope.row.type" style="width: 100%;">
					<el-option v-for="value in type_list" :label="value" :value="value" ></el-option>
				</el-select>
			</template>
		</el-table-column>
  		<el-table-column label="预期值" prop="exp" align="center">
  			<template #default="scope">
  				<el-input v-if="scope.row.type ==='Str'" style="width: 100%; box-sizing: border-box;" v-model="scope.row.exp" :disabled="readOnly" placeholder="请输入预期值"></el-input>
				<el-input v-if="scope.row.type ==='Dynamic'" style="width: 100%; box-sizing: border-box;" v-model="scope.row.exp" :disabled="readOnly" placeholder="请输入预期值"></el-input>
				<el-input-number v-if="scope.row.type ==='Int'" v-model="scope.row.exp" :step="1"   style="width: 100%;"/>
				<el-input-number v-if="scope.row.type ==='Float'" v-model="scope.row.exp" :precision="5" :step="1"   style="width: 100%;"/>
				<el-checkbox v-if="scope.row.type ==='Bool'" v-model="scope.row.exp" label="勾选代表True" size="large"/>
  			</template>
  		</el-table-column>
		<el-table-column label="实际值" prop="act" align="center">
			<template #default="scope">
				<el-input style="width: 100%; box-sizing: border-box;" v-model="scope.row.act" :disabled="readOnly" placeholder="请输入实际值"></el-input>
			</template>
		</el-table-column>
		<el-table-column label="与或非" prop="andOr" align="center" width="200px">
			<template #default="scope">
				<el-select v-model="scope.row.andOr" style="width: 100%;">
					<el-option v-for="value in and_or_list" :label="value" :value="value" ></el-option>
				</el-select>
			</template>
		</el-table-column>:
  		<el-table-column align="center" width="400px">
			<template #header>
				<el-button :icon="Plus" size="small" type='primary' @click="keyData.push(JSON.parse(JSON.stringify(this.json_row_data)))" :disabled="readOnly">新增</el-button>
				<el-tooltip content="勾选代表步骤执行后执行条件判断,不勾选代表步骤执行前执行条件判断">
					<el-checkbox :v-model="step_after" label="条件判断前后" size="large" style="margin-left: 20px; line-height: 40px;"/>
				</el-tooltip>
			</template>
  			<template #default="scope">
  			  <el-button :icon="Plus" size="small" type='primary' @click="addApiParams(scope.$index)" :disabled="readOnly">新增</el-button>
  			  <el-button :icon="CopyDocument" size="small" type='primary' @click="copyApiParams(scope.$index, scope.row)" :disabled="readOnly" >复制</el-button>
  			  <el-button :icon="Top" @click="topApiParams(scope.$index)" size="small" type="primary" :disabled="readOnly">上移</el-button>
  			  <el-button :icon="Bottom" @click="bottomApiParams(scope.$index)" size="small" type="primary" :disabled="readOnly">下移</el-button>
  			  <el-button :icon="Delete" @click="deleteApiParams(scope.$index)" size="small" type="danger" :disabled="readOnly">删除</el-button>
  			</template>
  		</el-table-column>
  </el-table>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen, CopyDocument, Top, Bottom, Loading} from '@element-plus/icons-vue'

export default{
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			Loading,
			EditPen,
			CopyDocument,
			Top,
			Bottom,
		}
	},
	props: ['keyData', 'readOnly', 'step_after'],
	data() {
		return {
			type_list: ['Str', 'Int', 'Float', "Bool", "Dynamic"],
			and_or_list: ["And", "Or"],
			
			method: [],
			json_row_data: {
				method: '',
				exp: '',
				act: '',
				type: 'Str',
				andOr: 'And'
				
			},
			bodyType: 'json',
		}
	},
	methods: {
		async getCheck(){
			const response = await this.$api.getCheck()
			if (response.status === 200){
				this.method = response.data.results
			}
		},
		addApiParams(index){
			const row_data = JSON.parse(JSON.stringify(this.json_row_data))
			this.keyData.splice(index + 1, 0, row_data)
		},
		deleteApiParams(index){
			this.keyData.splice(index, 1)
		},
		copyApiParams(index, value){
			const row_data = JSON.parse(JSON.stringify(value))
			this.keyData.splice(index + 1, 0, row_data)
		},
		topApiParams(index){
			if(index !=0){
				const row_data = this.keyData[index - 1]
				this.keyData[index - 1] = this.keyData[index]
				this.keyData[index] = row_data

			}
		},
		bottomApiParams(index){
			if(index != this.keyData.length - 1){
				const row_data = this.keyData[index + 1]
				this.keyData[index + 1] = this.keyData[index]
				this.keyData[index] = row_data
			
			}
		},
	},
	created() {
		this.getCheck()
	}
}

</script>

<style scoped>
	
</style>